<template>
    <div>
        <section id="projects" class="projects-section">
              <div id="menu">
                  <a href="#">主页</a>
                  <a href="#">目录</a>
              </div>
              <div id="logo">
                  <a href="">
                      <img src="../../../../assets/logos/vue.png">
                      <span>学习实践Vue</span>
                  </a>
              </div>
              <div id="container">
                  <div class="content">目录</div>
                  <ul id="toc">
                      <li>
                          <ul>
                              <li>
                                  <a>一</a>
                              </li>
                               <li>
                                  <a>二</a>
                              </li>
                               <li>
                                  <a>三</a>
                              </li>
                               <li>
                                  <a>四</a>
                              </li>
                               <li>
                                  <a>五</a>
                              </li>
                          </ul>
                      </li>
                  </ul>
              </div>
        </section>
    </div>
</template>
<script>
export default {
    name:"VueHome"
}
</script>

<style scoped>
.projects-section {
    text-align: center;
    padding: 5rem 2rem;
    background: #45567d;
    margin-top: 2rem;
}


#menu {
    background-color: rgb(195, 206, 240);
    text-align: center;
    margin-top: 2rem;
    position: absolute;
    top: -30px;
    left: -100px;
    width: 270px;
    transform-origin: 0 0;
    transform: rotate(-35deg) translate(-92px, 22px);
    padding-top: 6em;  
}
#menu a {
    display: block;
    padding: .2em 0;
    color: black;
}

/* 标题 */
#logo {
    padding: 1em 0;
}
#logo img {
    vertical-align: middle;
    width: 6em;
    border-radius: 50%;
}
#logo span {
    vertical-align: middle;
    font-size: 2em;
    font-family: 'Bree Serif', serif;
    margin-left: .2em;
    font-weight: bold;
}

/* 内容 */
#container {
    padding: 1em;
    margin: 0 0 1em 0;
    background-color: white;
     border-radius: .3em;
}


#toc {
  line-height: 1.5em;
  padding-left: 0;
}

#toc ul {
  padding: 0;
  width: 60%;
  margin: auto;
}

#toc li {
  list-style-type:none; 
  margin-bottom: 1em;
}

#toc li a {
  display: block;
  text-align: center;
  padding: .5em;
  color: #fff;
  background-color: rgb(69, 167, 93);
  border: solid rgb(54, 148, 90) 1px;
  border-bottom: solid rgb(31, 145, 101) 4px;
  text-shadow: 0px 2px 0 rgb(22, 124, 85);
  border-radius: .3em;
  position: relative;
  -webkit-transition: all 0.1s ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0.1s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.1s ease-out;  /* Opera 10.5–12.00 */
          transition: all 0.1s ease-out;  /* Firefox 16+, Opera 12.50+ */
}

#toc li a:hover {
  text-decoration: none;
  background-color: #157439;
}

#toc li a:active {
  border-bottom: solid #1c8a65 1px;
  top: 4px;
  -webkit-transition: all 0 ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0 ease-out;  /* Firefox 4-15 */
       -o-transition: all 0 ease-out;  /* Opera 10.5–12.00 */
          transition: all 0 ease-out;  /* Firefox 16+, Opera 12.50+ */
}


@media screen and (min-width:601px) {
  #toc {
    -moz-column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    column-count: 2;
    column-gap: 1em;
    line-height: 1.2em;
  }
}
</style>